<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="歌曲列表" name="1">
      <div v-if="activeName === '1'">
        <Song />
      </div>
    </el-tab-pane>
    <el-tab-pane :label="count" name="2">
      <div v-if="activeName === '2'">
        <Play @count="getCount" />
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { mapState } from 'vuex';

export default {
  components: {
    Song: () => import('../components/songListCom/song.vue'),
    Play: () => import('../components/songListCom/playlist.vue'),
  },
  computed: {
    ...mapState(['songList']),
  },
  watch: {
    songList(newVal, oldVal) {
      this.getCount(null)
    },
  },
  data() {
    return {
      activeName: '1',
      count: '评论',
    };
  },

  methods: {
    getCount(data) {
      if (data === null) {
        this.count = '评论'
      } else {
        this.count = '评论' + `(${data})`;
      }
    },
  },
};
</script>

<style scoped>
</style>
